<template>
  <div class="home">
    <el-container>
      <el-aside :width="asideshow">
        <!-- 这个是菜单的组件 -->
        <img src="../../utils/video/logo.png" />
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          text-color="#4e5bf8"
          ref="sideMenu"
          active-text-color="#E47833"
        >
          <qf-sub-menu :sideMenu="$store.state.userMenu"></qf-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 这个是顶部的组件 -->
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6">
              <div class="grid-content bg-purple top-left">
                <span :class="setsideshoe" @click="issideshow"></span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light top-conter">CRM系统</div>
            </el-col>
            <el-col :span="6" class="topright">
              <!-- 头像 -->
              <div class="grid-content bg-purple top-right">
                <el-avatar :size="size" :src="circleUrl"></el-avatar>
              </div>
              <!-- 下拉 -->
              <el-dropdown @command="handleCommand" class="dropdown">
                <span class="el-dropdown-link" style="fontSize=50px">
                  {{ userInfo.nickname }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="topdropdown">
                  <el-dropdown-item
                    command="a"
                    style="color: blue"
                    v-if="userInfo.vipLevel"
                  >
                    Vip到期时间[{{ vipExpries }}]
                  </el-dropdown-item>
                  <el-dropdown-item command="b" style="color: blue">
                    Vip充值
                  </el-dropdown-item>
                  <el-dropdown-item command="c" style="color: blue">
                    账号信息
                  </el-dropdown-item>
                  <el-dropdown-item command="c" style="color: blue">
                    项目管理
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";
export default {
  computed: {
    // ...mapState(["userInfo", "sideMenu", "breadCrumb"]),
    ...mapState(["userInfo"]),
    circleUrl() {
      return this.userInfo.headimgurl
        ? this.userInfo.headimgurl
        : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F80%2Fv2-536480819561de2a4af2d9c3f64dd2b5_720w.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661778002&t=646a93e35defe256012942a457c567b9";
    },
    vipExpries() {
      //vip过期时间
      let stamp = this.userInfo.vipStamp;
      let date = moment(stamp).format("YYYY-MM-DD HH:mm:ss");
      return date;
    },
    vipIconName() {
      //计算vip图标名称
      let { vipLevel } = this.userInfo;
      if (vipLevel === 1) {
        return "     icon-huaban        ";
      } else if (vipLevel === 2) {
        return "icon-chuangxiangzuanshivip";
      } else if (vipLevel === 3) {
        return "icon-chuangxiangzijinvip";
      } else {
        return "";
      }
    },
  },

  data() {
    return {
      asideshow: "200px",
      //左边菜单的宽度
      setsideshoe: "iconfont icon-shouqicaidan",

      //右侧头像磁村
      size: 60,
    };
  },
  methods: {
    issideshow() {
      if (this.asideshow == "200px") {
        this.asideshow = "50px";
      } else {
        this.asideshow = "200px";
      }
      if (this.setsideshoe == "iconfont icon-shouqicaidan") {
        this.setsideshoe = "iconfont icon-zhankaicaidan";
      } else {
        this.setsideshoe = "iconfont icon-shouqicaidan";
      }
    },
    //下拉框的事件
    handleCommand(command) {
      this.$message("click on item " + command);
    },
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
html,
body,
#app,
.home,
.el-container {
  width: 100%;
  height: 100%;
}
/* 这个是整个结构组件样式开始 */
.el-header,
.el-footer {
  background-color: #9ce3b1;
  color: #333;
  text-align: center;
  height: 70px !important;
  // line-height: 30px;
  .top-conter {
    padding: 10px;
    font-size: 35px;
    font-weight: 900;
    width: 200px;
    text-align: center;
  }
  /deep/ .top-left {
    // background-color: rgb(162, 108, 108);
    margin-left: -20px;
    width: 50px;
  }
}

.el-aside {
  background-color: #9ce3b1;
  color: #333;
  text-align: center;
  line-height: 60px;
  height: 720px;
  padding-top: 10px;
  img {
    width: 90%;
    // height: 50%;
  }
}

.el-main {
  background-color: #f3e9f3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

// .el-container:nth-child(5) .el-aside,
// .el-container:nth-child(6) .el-aside {
//   line-height: 260px;
// }

// .el-container:nth-child(7) .el-aside {
//   line-height: 320px;
// }
/* 这个是整个结构组件样式结束 */

/* 这个是顶部组件样式开始 */
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  // background: #99a9bf;
  border: 2px solid #ccc;
}
.bg-purple {
  // background: #d3dce6;
}
.bg-purple-light {
  // background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  /deep/ .iconfont {
    font-size: 50px;
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 70px;
    width: 30px;
  }
}
.row-bg {
  // padding: 10px 0;
  background-color: #9ce3b1;
}
/* 这个是顶部结构组件样式结束 */
//顶部的菜单右边
.topright {
  display: flex;
  align-items: center;

  .dropdown {
    padding-left: 30px;
    width: 100px !important;
    .topdropdown {
      .el-dropdown-item {
        width: 100px !important;
      }
    }
  }
}
</style>
